<template>
    <div>
      <el-row :gutter="14" class="pd-tb-10-px">
        <el-col :span="8">
          <p>中文</p>
          <el-input type="textarea" :autosize="{ maxRows: 4,minRows:4}" v-model="promptA"></el-input>
        </el-col>
        <el-col :span="8">
          <p>英文</p>
          <el-input type="textarea" :autosize="{ maxRows: 4,minRows:4}" v-model="promptB"></el-input>
        </el-col>
        <el-col :span="8">
          <p>结果</p>
          <el-input type="textarea" :autosize="{ maxRows: 4,minRows:4}" v-model="promptC"></el-input>
        </el-col>
      </el-row>
      <div class="pd-tb-10-px"><el-button size="small" @click="trMap">映射</el-button></div>
      <el-tabs type="border-card" >
        <el-tab-pane label="人物" >
          <el-collapse >
            <el-collapse-item title="性别" name="sex">
              <p>1男孩(1boy),1女孩(girl),单人(solo)</p>
            </el-collapse-item>
            <el-collapse-item title="头" name="header">
              <p>
                表情：微笑(smile),腮红( blush)
              </p>
              <p>
                发型：黑色头发(black hair),男性焦点(male focus),短发(short hair),短马尾( short ponytail)
                眼睛之间的头发(hair between eyes),刘海(bangs),马尾( ponytail),棕色头发( brown hair),辫子(braid)
                长发( long hair),发饰( hair ornament),头发过肩( hair over shoulder),
                眼神交流( eye contact),
                看着另一个人( looking at another)
              </p>
              <p>
                额头: 腮红(blush)
              </p>
              <p>
                眉毛:
              </p>
              <p>
                眼睛: 看着观众(looking at viewer),蓝眼睛(blue eyes),棕色眼睛(brown eyes),面朝外( facing away)
              </p>
              <p>
                鼻子:
              </p>
              <p>
                嘴：分开的嘴唇(parted lips),闭着嘴( closed mouth)
              </p>
              <p>
                耳: 耳环 (earrings)
              </p>
            </el-collapse-item>
            <el-collapse-item title="上半身" name="upBody">
              <p>上身(upper body),全身( full body)</p>
              <p>
                胸部： 中等胸部(medium breasts),通过衣服可见的胸罩(bra visible through clothes),胸部(breasts),侧锁( sidelocks)
              </p>
              <p>
                手：
                牵手(holding hands),
                持有花 (holding flower),
                持有花束( holding bouquet),
                持有(holding),
                手放口袋( hand in pocket)
              </p>
              <p>
                  肩膀,后背,前身,肚子
              </p>
            </el-collapse-item>
            <el-collapse-item title="下半身" name="lowerBody">
              <p>
                臀部，
                生殖器，

              </p>
              <p>
                脚部：黑色鞋子( black footwear),鞋底( shoe soles),鞋子( shoes)
              </p>
            </el-collapse-item>
            <el-collapse-item title="服装" name="fz">
              <p>
                夹克(jacket),黑色裙子(black skirt),湿衬衫(wet shirt),短袖( short sleeves),领带( necktie)
                白衬衫(white shirt),蝴蝶结(bowtie),长袖(long sleeves),汉服( hanfu),正式( formal)
                衬衫(shirt),百褶裙(pleated skirt),湿衣服(wet clothes),西装( suit),连衣裙( dress)
                肩包(shoulder bag),包(bag),校服(school uniform),中国衣服( chinese clothes)
                白色胸罩(white bra),书包(school bag),胸罩(bra),有领衬衫(collared shirt),黑色领带( black necktie),
                内衣(underwear),红色领结(red bowtie),超短裙(miniskirt),红色蝴蝶结(red bow),白色连衣裙( white dress),
                牛仔裤( jeans),t恤( t-shirt),袜子( socks),牛仔( denim),裤子( pants),短裤( shorts),腰带( sash)
              </p>
            </el-collapse-item>
            <el-collapse-item title="姿势/动作" name="zs">
              <p>
                鞠躬(bow),透过(see-through),站着 (standing),走路( walking),抱着( holding)
              </p>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="环境/地点" >
          <el-collapse >
            <el-collapse-item title="室内/室外" name="inout">
              <p>
                室内：室内(indoors),湿(wet),湿衣服(wet clothes),拱门(arch),柱子(pillar)
              </p>
              <p>
                室外： 街道(street),小巷( alley) ,户外(outdoors),植物(plant),墓碑 (tombstone),柱子(pillar),树(tree),建筑( architecture)
              </p>
              <p>
                道具：
                建筑(building),水(water)，亚洲建筑( east asian architecture)
                机动车(motor vehicle),汽车(car),地面车辆(ground vehicle),窗户(window),背包(backpack),包( bag)
                盆栽(potted plant),植物 (plant),白花(white flower),花束(bouquet),花 (flower),盒子( box),篮球( basketball)
              </p>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="时间" >
          <el-collapse >
            <el-collapse-item title="白天" name="day">
              <p>白天(day)</p>
            </el-collapse-item>
            <el-collapse-item title="黑夜" name="linght">
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="镜头" >
          <el-collapse >
          <el-collapse-item title="观众视线" name="sx">
            <p>
              侧面 (profile),从侧面 (from side),从后面( from behind),个人焦点( solo focus),牛仔镜头( cowboy shot),
              背对观众( facing away)
            </p>
          </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="量词" >
          <el-collapse >
          <el-collapse-item title="量词" name="lc">
            <p>
              1男孩(1boy),1女孩(girl),单人(solo),多个女孩(multiple girls),
              2男孩( 2boys),多个男孩( multiple boys)
            </p>
          </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
import util from "utils/util";

export default {
  name: "prompt" ,
  data(){
    return {
      promptC: '',
      promptB: '',
      promptA: '' ,
      prompts: [
        {
          name: '人物',
          decorations: [],
          prompts: [] ,
          children: [
            {
              name: '头部',
              children: [
                {
                  name: '头'
                },
                {
                  name: '眼睛'
                },
                {
                  name: '额头'
                }

              ]
            }
          ]
        }
      ]
    }
  },
  methods:{
    trMap(){
      if(util.isVoid(this.promptA)|| util.isVoid(this.promptB)){
        this.$message.error("请输入相应的数据");
        return ;
      }
      let pA = this.promptA.split(/[,，]/g);
      let pB = this.promptB.split(/[,，]/g);
      if(pA.length !== pB.length){
        this.$message.error("数据不对应");
        return ;
      }
      let c = [] ;
      pA.forEach((p,index)=>{
        c.push(`${p}(${pB[index]})`)
      })
      this.promptC = c.join("\n")
    }
  }
}
</script>

<style scoped>

</style>